<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../static/assets/bootstrap/css/bootstrap.min.css"
          th:href="@{/assets/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../../static/assets/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/assets/bootstrap-table/bootstrap-table.min.css}"/>
    <script src="../../static/assets/jquery.min.js"
            th:src="@{/assets/jquery.min.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<nav class="navbar navbar-expand-lg navbar-light static-top sb-navbar">
    <div class="container-fluid">
        <a class="navbar-brand">OAuth2 管理</a>
        <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="navbar-collapse collapse" id="navbarResponsive" style="">
            <ul class="navbar-nav mr-auto">
                <!-- <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="dropdownThemes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Themes</a>
                     <div class="dropdown-menu" aria-labelledby="dropdownThemes">
                         <a class="dropdown-item" href="#">
                             <i class="fa fa-star"></i>
                             Most Popular</a>
                         <div class="dropdown-divider"></div>
                         <a class="dropdown-item" href="#">Full Websites</a>
                     </div>
                 </li>-->
                <li class="nav-item">
                    <a class="nav-link" href="/management/client/">应用接入管理</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="/management/user/">用户管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">退出</a>
                </li>
            </ul>
            <!--<ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="https://twitter.com/sbootstrap">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://twitter.com/sbootstrap">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
            </ul>-->
        </div>
    </div>
</nav>
<div class="container-fluid mt-3">
    <section>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content">
                <table id="table">
                </table>
                <br/>
                <button type="button" class="btn btn-info" id="createNew">添加新纪录</button>
            </section>
            <section class="content">
                <form class="d-none" id="detailsForm">

                    <input type="hidden" value="" id="id"/>

                    <div class="form-group row my-2">
                        <label for="nickName" class="col-2 control-label text-end">昵称</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="nickName" placeholder="昵称"
                                   required="required"/>
                        </div>
                    </div>

                    <div class="form-group row my-2">
                        <label for="username" class="col-2 control-label text-end">用户名</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="username" placeholder="用户名"
                                   required="required"/>
                        </div>
                    </div>

                    <div class="form-group row my-2">
                        <label for="password" class="col-2 control-label text-end">密码</label>
                        <div class="col-6">
                            <input type="password" class="form-control" id="password" placeholder="密码"/>
                        </div>
                    </div>

                    <div class="form-group row my-2">
                        <label for="roles" class="col-2 control-label text-end">角色</label>
                        <div class="col-6">
                            <select class="form-control" id="roles" multiple="multiple" required="required">
                                <option value="ROLE_USER">ROLE_USER</option>
                                <option value="ROLE_OPERATOR">ROLE_OPERATOR</option>
                                <option value="ROLE_SUPER">ROLE_SUPER</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row my-2">
                        <label for="address" class="col-2 control-label text-end">地址</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="address" placeholder="地址"/>
                        </div>
                    </div>
                    <div class="form-group row my-2">
                        <label class="col-2 control-label"></label>
                        <div class="col-6">
                            <button type="submit" class="btn btn-info mr-5" id="update">保存</button>
                        </div>
                    </div>
                </form>
            </section>
            <!-- /.content -->
            <!-- /.content -->
        </div>
    </section>
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
</footer>

<script src="../../static/assets/bootstrap/js/bootstrap.min.js"
        th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
<script src="../../static/assets/moment-with-locales.min.js"
        th:src="@{/assets/moment-with-locales.min.js}"></script>
<script th:src="@{/assets/localforage.min.js}" src="../static/assets/localforage.min.js"></script>

<script type="text/javascript" charset="utf8" src="../../static/assets/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assets/bootstrap-table/bootstrap-table.min.js}"></script>

<th:block th:inline="javascript">
    <script>

        function formatBoolean(cellValue, options, rowObject) {
            if (cellValue == null || cellValue == "") {
                return "";
            } else if (cellValue == true) {
                return "是";
            } else {
                return "否";
            }
        }

        function formatStatus(cellValue, options, rowObject) {
            if (cellValue === null || cellValue === "") {
                return "";
            } else if (Number(cellValue) == -1) {
                return "是";
            } else {
                return "否";
            }
        }

        function formatDate(cellValue) {
            if (cellValue != null && cellValue != "") {
                var day = moment(cellValue);
                var formatted = day.format("YYYY-MM-DD HH:mm");
                return formatted;
            } else {
                return "";
            }

        }

        $(document).ready(function () {

            let $table = $('#table');
            $table.bootstrapTable({
                url: '/management/user/list',
                dataField: 'rows',
                uniqueId: 'id',
                toolbar: '#toolbar',
                clickEdit: true,
                showToggle: true,
                pagination: true,       //显示分页条
                showColumns: true,
                showPaginationSwitch: true,     //显示切换分页按钮
                showRefresh: true,      //显示刷新按钮
                sidePagination: 'server',
                //clickToSelect: true,  //点击row选中radio或CheckBox
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID',
                    sortable: false
                }, {
                    field: 'username',
                    title: 'username',
                    sortable: true
                }, {
                    field: 'roles',
                    title: 'roles',
                    sortable: false,
                    formatter: function (value, row, index) {
                        let roleArray = [];
                        for (let j = 0; j < value.length; j++) {
                            roleArray.push(value[j].roleName);
                        }
                        return roleArray.join(",");
                    }
                }, {
                    field: 'nickName',
                    title: 'nickName',
                    sortable: false
                }, {
                    field: 'dateCreated',
                    title: 'dateCreated',
                    sortable: true
                }, {
                    field: '',
                    title: '操作',
                    formatter: function (value, row, index) {
                        var btnString = "";
                        if (row.recordStatus < 0) {
                            btnString = "<button class='btn btn-secondary btn-sm btn-status' data-user-id='" + row.id + "' data-record-status='" + row.recordStatus + "'>启用</button>";
                        } else {
                            btnString = "<button class='btn btn-success btn-sm btn-status' data-user-id='" + row.id + "' data-record-status='" + row.recordStatus + "'>禁用</button>";
                        }
                        btnString += "&nbsp;&nbsp;&nbsp;<button class='btn btn-primary btn-sm btn-edit' data-user-id='" + row.id + "'>编辑</button>";
                        return btnString;
                    }
                }],
                onLoadError: function (status, jqXHR) {
                    Swal.fire({
                        icon: 'error',
                        title: status,
                        text: 'Something went wrong!',
                        timer: 1500
                    })
                }
            });


            $("#createNew").click(function () {
                $("#id").val(0);
                $("#nickName").val("");
                $("#address").val("");
                $("#username").val('');
                $("#password").val('');
                $("#roles").val('');
                $("#detailsForm").removeClass("d-none");
                $("#message").removeClass("bg-danger").html("");
                $("#message").removeClass("bg-success").html("");
            });


            $("#table").on("click", ".btn-edit", function () {
                var userId = $(this).data("user-id");
                $("#detailsForm").removeClass("d-none");
                var url = "/management/user/details?id=" + userId;
                $.get(url, function (data) {
                    $("#id").val(data.id);
                    $("#nickName").val(data.nickName);
                    $("#address").val(data.address);
                    $("#username").val(data.username);
                    $("#password").val('');
                    let roleArray = [];
                    for (let j = 0; j < data.roles.length; j++) {
                        roleArray.push(data.roles[j].roleName)
                    }
                    $('#roles').val(roleArray);
                    $("#message").removeClass("bg-danger").html("");
                    $("#message").removeClass("bg-success").html("");
                });
            });


            $("#detailsForm").on("submit", function (e) {
                e.preventDefault();
                let selectedValues = $("#roles").find('option:selected').map(function () {
                    return $(this).val();
                }).get();

                $.ajax({
                    type: 'POST',
                    url: '/management/user/details',
                    data: {
                        id: $("#id").val(),
                        nickName: $("#nickName").val(),
                        address: $("#address").val(),
                        username: $("#username").val(),
                        password: $("#password").val(),
                        roles: selectedValues.join(",")
                    },
                    success: function (data) {
                        if (data.status == 1) {
                            $table.bootstrapTable('refresh')
                            $("#createNew").trigger("click");
                            $("#detailsForm").addClass("d-none");
                            alert("保存成功!");
                        } else {
                            alert(data.message);
                        }
                    }
                });
                return false;
            });

            $("#table").on("click", ".btn-status", function () {
                var userId = $(this).data("user-id");
                var deleteOperation = $(this).data("record-status");
                $.ajax({
                    type: 'POST',
                    url: '/management/user/details',
                    data: {id: userId, deleteOperation: deleteOperation},
                    success: function (data) {
                        $table.bootstrapTable('refresh')
                    }
                });

            });

        });
    </script>
</th:block>
</body>
</html>
